<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: aqua;
        }
    </style>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //行内样式 display：none 
            // 显示的时候显示的还是原来的display 
            // 原来没有display就删除display样式
            $(".show").click(function(){
                // $(".div").show()
                 $(".div").show(1000)//动画路线显示左上角-> 右下角时间
               // $(".div").show("slow") //normal fast
            })
            $(".hide").click(function(){
                $(".div").hide(1000)
            })
            $(".toggle").click(function(){
                $(".div").toggle()
            })
            // 行内样式 height
            // 动画路线 上<->下
            $(".slidedown").click(function(){
                $(".div").slideDown(3000)
            })
            $(".slideup").click(function(){
                $(".div").slideUp()
            })
            $(".slidetoggle").click(function(){
                // $(".div").slideToggle()
               // $(".div").stop().slideToggle(3000) //在最后一次动画基础上，继续新动画
                $(".div").stop() //停止动画
                //$(".div").finish().slideToggle(3000) 结束动画（无论是否做完）      开始新动画

            })
            // 行内样式  opacity 0-1
            $(".fadein").click(function(){
                $(".div").fadeIn()
            })
            $(".fadeout").click(function(){
                $(".div").fadeOut(3000)
            })
            $(".fadetoggle").click(function(){
                $(".div").fadeToggle()
            })
            $(".fadeto").click(function(){
                $(".div").fadeTo("normal",0.3) 
                //理论第一个值可选  但 现在必须写  透明度为0.3
            })
            // 动画是一个一个执行 不能同时执行 所以需要自定义动画

            $(".animate").click(function(){
              //  $(".div").animate({width:"400px",height:"400px"},1000)
               // $(".div").animate({width:"400px",height:"400px",opacity:0.3},1000)
                $(".div").animate({width:"+=40px",height:"+=40px",opacity:0.3},1000)
             })
        })
    </script>
</head>
<body>
    <button class="show"> show</button>
    <button class="hide"> hide</button>
    <button class="toggle"> toggle</button>
    <br>
    <button class="slidedown"> slidedown</button>
    <button class="slideup"> slideup</button>
    <button class="slidetoggle"> slidetoggle</button>
    <br>
    <button class="fadein"> fadein</button>
    <button class="fadeout"> fadeout</button>
    <button class="fadetoggle"> fadetoggle</button>
    <button class="fadeto"> fadeto</button>
    <br>
    <button class="animate"> animate</button>

    <div class="div"></div>
    
</body>
</html>